<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="900px"
      style="margin-top: -60px !important"
      append-to-body
      :before-close="handleClose"
    >
      <div style="height: 700px" class="scrollbar">
        <el-scrollbar style="height: 100%">
          <div
            v-for="(item, index) in processConten"
            :key="index"
            class="process_box"
          >
            <h3 v-for="t in item.titLis">{{ t.tit }}</h3>
            <el-image
              v-for="v in item.imgLis"
              :src="v.url"
              :preview-src-list="bigImgList"
              :style="{ width: v.W }"
            ></el-image>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleType: "", //wx_kf 微信客服 //qyWx_kf 企业微信客服 //gz_gzh 关注公众号
      dialogVisible: false,
      dialogTitle: "",
      processConten: "",
      bigImgList: [], //大图
      // 小程序客服设置步骤说明
      wx_program: [
        {
          titLis: [
            { tit: "1、商户登录微信公众平台，网址：https://mp.weixin.qq.com" },
          ],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/official_1.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [
            { tit: "2、登录成功后进入功能--客服菜单，进入小程序客服界面。" },
          ],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/wechat_2.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [{ tit: "3、添加客服微信号。" }],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/wechat_4.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [
            {
              tit: "4、添加成功后，客服可点击“网页端客服”或者“移动端小程序客服”进行客服沟通;",
            },
            { tit: "“移动端小程序客服”需要客服扫码进入“客服小助手”小程序。" },
          ],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/wechat_5.png"),
              W: "100%",
            },
            {
              url: require("/public/static/img/kf-img/wechat_6.png"),
              W: "300px",
            },
          ],
        },
        {
          titLis: [{ tit: "网页端客服界面：" }],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/wechat_3.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [{ tit: "移动端小程序客服界面：" }],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/wechat_7.png"),
              W: "300px",
            },
          ],
        },
        {
          titLis: [{ tit: "注：具体样式及流程以微信公众平台为准。" }],
          imgLis: [],
        },
      ],
      // 小程序企业微信客服设置步骤说明
      qyWx_program: [
        {
          titLis: [
            {
              tit: "1、商户首先登录企业微信，未注册商户可点击链接注册企业微信；网址：https://work.weixin.qq.com",
            },
          ],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_1.png"), W: "100%" },
          ],
        },
        {
          titLis: [
            {
              tit: "2、登录企业微信管理后台，进入「我的企业」，完成企业验证。",
            },
          ],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_2.png"), W: "100%" },
          ],
        },
        {
          titLis: [{ tit: "3、在企业信息处复制企业ID。" }],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_3.png"), W: "100%" },
          ],
        },
        {
          titLis: [
            {
              tit: "4、在小程序管理后台的「功能-客服-微信客服」处，填写对应的企业ID，完成绑定。",
            },
            { tit: "（备注：暂仅支持绑定非个人小程序）" },
          ],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_4.png"), W: "100%" },
          ],
        },
        {
          titLis: [
            {
              tit: "5、登录企业微信管理后台，进入「应用管理-应用-微信客服」，选择接入场景为「在微信内其他场景接入」。",
            },
          ],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_5.png"), W: "100%" },
          ],
        },
        {
          titLis: [
            {
              tit: "6、选择需要在小程序中接待用户咨询的客服帐号，找到对应的客服链接，复制。",
            },
          ],
          imgLis: [
            { url: require("/public/static/img/kf-img/work_6.png"), W: "100%" },
          ],
        },
        {
          titLis: [
            {
              tit: "7、复制客服链接及企业ID填入商户后台小程序设置里，用户就能联系客服。",
            },
            { tit: "注：具体样式及流程以微信公众平台为准。" },
          ],
          imgLis: [],
        },
      ],
      // 小程序关注公众号组件设置步骤说明
      gzGzh_program: [
        {
          titLis: [
            { tit: "1、商户登录微信公众平台，网址：https://mp.weixin.qq.com" },
          ],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/official_1.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [{ tit: "2、登录成功后进入设置--关注公众号界面。" }],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/official_2.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [
            { tit: "3、开启“引导关注公众”，然后设置需要关注的公众号。" },
          ],
          imgLis: [
            {
              url: require("/public/static/img/kf-img/official_3.png"),
              W: "100%",
            },
          ],
        },
        {
          titLis: [{ tit: "注：具体样式及流程以微信公众平台为准。" }],
          imgLis: [],
        },
      ],
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    open(e) {
      this.dialogVisible = true;
      this.roleType = e.roleType;
      this.dialogTitle =
        e.roleType == "wx_kf"
          ? "小程序客服设置步骤说明"
          : e.roleType == "qyWx_kf"
          ? "小程序企业微信客服设置步骤说明"
          : "小程序关注公众号组件设置步骤说明";
      this.setProcessContenFun();
    },
    // 判断类型并赋值
    setProcessContenFun() {
      let roleType = this.roleType;
      let program = "";
      switch (roleType) {
        case "wx_kf":
          this.processConten = this.wx_program;
          break;
        case "qyWx_kf":
          this.processConten = this.qyWx_program;
          break;
        case "gz_gzh":
          this.processConten = this.gzGzh_program;
          break;
      }

      // 赋值大图
      this.processConten.forEach((el) => {
        let imgLis = el.imgLis;
        if (imgLis) {
          imgLis.forEach((img) => {
            this.bigImgList.push(img.url);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-scrollbar__wrap {
  overflow: scroll;
  // width: 110%; //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
  height: 110%; //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
  padding-bottom: 50px;
}
.process_box {
  overflow: hidden;
  margin-bottom: 30px;
  h3 {
    margin: 20px 0;
  }
}
</style>
